<template>
<div class="printBody">
    <div class="style-label no-print">
        @page {
        margin: 0;
        padding: 0;
        }
		html,body{
			padding:0;
			margin:0;
			width:100%;
			height:100%;
		}
        .printBody {
        width: 100%;
        height: 100%;
        }

        .printBody .print {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
		overflow:hidden;
        }

        .printBody .print .barcodeQrcode {
        display: block;
		overflow:hidden;
        }
    </div>
    <div
        class="print"
        v-for=" (item, index) in drawQr"
        :key="index"
    >
        <div :id="'qrcode'+index" class="barcodeQrcode"></div>
		<div>{{item.barcode}}</div>
        <div class="printText" style="margin-top:5px;">
            <div>物料编号：{{item.materialCode}}</div>
            <div>物料名称：{{item.materialName}}</div>
            <div>入库数量：{{item.materialQty}}</div>
        </div>
    </div>
</div>
</template>

<script>
import QRcode from "qrcodejs2"

export default {
    components: {
        // barcode: VueBarcode
    },
    props: {
        drawQr: {
            type: Array,
            default: []
        },
    },
    created() {
        // this.paginator(this.delInfo)
    },
    mounted() {
        this.$nextTick(() => {
            this.qrcode();
        })
    },
    data() {
        return {}
    },
    methods: {
        qrcode() {
            this.drawQr.map((x, index) => {
                document.getElementById(`qrcode${index}`).innerHTML = '';
                let qrcode = new QRcode(`qrcode${index}`, {
                    width: 140,
                    height: 140,
                    text: `${x.barcode}`
                });
            });
        },
    },
    watch: {
        drawQr: {
            handler(newVal) {
                if (newVal) {
                    this.$nextTick(() => {
                        this.qrcode();
                    })
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
@page {

    margin: 0;

    padding: 0;
}

.printBody {
    width: 100%;

    height: 100%;
}

.printBody .print {

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;
}

.printBody .print .barcodeQrcode {

    display: block;
}
</style>
